<template>
  <el-dialog
    :visible.sync="dialogTableVisible"
    :title="$t(title)"
    :close-on-click-modal="false"
    @close="resetForm"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
      class="demo-ruleForm"
    >
      <el-form-item label="岗位名称" prop="name">
        <div v-if="isSee">
          {{ ruleForm.name }}
        </div>
        <el-input
          v-else
          v-model="ruleForm.name"
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="上级类型">
        <div v-if="isSee">
          {{ ruleForm.type === "PLT" ? "平台级" : "企业级" }}
        </div>
        <el-radio-group v-else v-model="ruleForm.type" @change="typeChangeHandle">
          <el-radio label="PLT">平台级</el-radio>
          <el-radio label="ENT">企业级</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级岗位" prop="pid">
        <div v-if="isSee">
          {{ ruleForm.father ? ruleForm.father.name : "" }}
        </div>
        <el-select v-else v-model="ruleForm.pid" placeholder="请选择上级岗位">
          <el-option
            v-for="(item, index) in pList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div v-if="!isSee" slot="footer" class="dialog-footer">
      <el-button @click="dialogTableVisible = false">
        {{ $t("table.cancel") }}
      </el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">
        {{ $t("table.confirm") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postHandle } from '@/api'
import waves from '@/directive/waves' // waves directive
export default {
  name: 'PosDialog',
  directives: { waves },
  data() {
    return {
      dialogTableVisible: false,
      title: null,
      type: null,
      isSee: false,
      urls: {
        list: '/api/v1/welder-uac-second/base-profession-comb/list',
        add: '/api/v1/welder-uac-second/base-profession-comb/create-profession-ent',
        show: '/api/v1/welder-uac-second/base-profession-comb/show/',
        update:
          '/api/v1/welder-uac-second/base-profession-comb/update-profession-ent/'
      },
      pList: [],
      ruleForm: {
        name: null,
        pid: null,
        type: 'PLT'
      },

      rules: {
        name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }]
      }
    }
  },

  computed: {
    spaceId() {
      return this.$store.state.enterprise.entSpaceId
    }
  },
  watch: {
    'ruleForm.type': {
      handler: function(v) {
        if (v) {
          if (v === 'PLT') {
            this.getPList(1)
          } else {
            this.getPList(2)
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    handleDialog(type, data) {
      this.type = type
      this.isSee = type === 'see'
      this.title =
        type === 'add'
          ? 'table.add'
          : type === 'edit'
            ? 'table.edit'
            : 'table.see'
      if (this.type === 'edit' || this.type === 'see') {
        this.id = data.id
        this.getDet()
      }
      this.dialogTableVisible = true
    },

    getPList(data) {
      let params = {
        d: {
          filters: [
            { field: 'spaceId', operator: 'EQUALS', value: this.spaceId },
            { field: 'level', operator: 'EQUALS', value: data }
          ],
          page: {
            p: 1,
            ps: 99999
          },
          retPage: true
        }
      }
      postHandle(this.urls.list, params).then((res) => {
        this.pList = res.result
      })
    },

    getDet() {
      postHandle(this.urls.show + this.id, {}).then((res) => {
        this.ruleForm = res.result
      })
    },

    resetForm() {
      this.$refs['ruleForm'].resetFields()
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            obj: {
              ...this.ruleForm,
              spaceId: this.spaceId
            }
          }
          if (this.type === 'add') {
            postHandle(this.urls.add, params).then((res) => {
              this.$message.success('新增成功')
              this.$emit('refreshTab')
              this.dialogTableVisible = false
            })
          } else {
            postHandle(this.urls.update + this.id, params).then((res) => {
              this.$message.success('修改成功')
              this.$emit('refreshTab')
              this.dialogTableVisible = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    typeChangeHandle() {
      this.ruleForm.pid = null
    },

    clearForm() {
      this.ruleForm = {
        name: null,
        pid: null,
        type: 'PLT'
      }
    }
  }
}
</script>

